<template>
    <div class="person">
        <!-- v-model双向绑定 -->
    姓：<input type="text" v-model="firstName"> <br>  
    名：<input type="text" v-model="lastName"> <br>
    全名：<span></span>{{ fullName }}<br>
    <button @click="changeFullName">点我全名改成li-si</button>
    </div>
</template>


<script lang="ts" setup name="Person234">
    import {ref,computed} from "vue"

    let firstName = ref(("zhang"))
    let lastName = ref(("san"))
    // 计算属性，只可读
    // let fullName = computed(()=>{
    // return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+'-'+lastName.value
    // })
    //计算属性，可读可写
    let fullName = computed({
        get(){
            return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+'-'+lastName.value
        },
        set(val){
            console.log(val)
            const [str1,str2] = val.split('-') //changeFullName()不引起改变，set收到参数"li-si"分别赋值给姓和名
            firstName.value = str1
            lastName.value = str2
        }
    })
    function changeFullName(){
        fullName.value = "li-si"
    }
</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
</style>